<template>
  <view class="container">
    <!-- 进度指示器 -->
    <view class="progress-bar">
      <view v-for="(step, index) in steps" :key="index" class="progress-step" :class="{ 'active': currentStep >= index, 'completed': currentStep > index }">
        <view class="step-number">{{ index + 1 }}</view>
        <view class="step-title">{{ step.title }}</view>
      </view>
    </view>

    <!-- 步骤内容 -->
    <view class="step-content">
      <view class="form-container">
        
        <!-- 第一步：课程信息 -->
        <view v-if="currentStep === 0" class="step-container">
          <view class="step-header">
            <view class="step-icon">📖</view>
            <view class="step-title-main">课程信息设置</view>
            <view class="step-description">选择课程分类、具体课程、上课时间和地点等基础信息</view>
          </view>

          <view class="form-section">
            <view class="form-item">
              <view class="form-label required">课程分类</view>
              <view class="form-input-wrapper" @click="showCategorySelect = true">
                <view class="form-input" :class="{ 'placeholder': !form.courseCategoryName }">
                  {{ form.courseCategoryName || '请选择课程分类' }}
                </view>
                <u-icon class="form-arrow" name="arrow-down" size="24" color="#999"></u-icon>
              </view>
              <view v-if="errors.courseCategoryName" class="error-text">{{ errors.courseCategoryName }}</view>
            </view>
            
            <view class="form-item">
              <view class="form-label required">课程名称</view>
              <view class="form-input-wrapper" @click="checkAndShowCourseSelect">
                <view class="form-input" :class="{ 'placeholder': !form.courseName, 'disabled': !form.courseCategoryId }">
                  {{ form.courseName || '请选择课程名称' }}
                </view>
                <u-icon class="form-arrow" name="arrow-down" size="24" color="#999"></u-icon>
              </view>
              <view v-if="errors.courseName" class="error-text">{{ errors.courseName }}</view>
            </view>

            <!-- 上课时间选择 -->
            <view class="form-item">
              <view class="form-label required">上课时间</view>
              <view class="simple-input" @click="openCalendar('start')">
                {{ form.startTime || '请选择上课时间' }}
              </view>
              
              <!-- 快速时间选择 -->
              <view class="quick-time-select">
                <view class="quick-time-label">快速选择：</view>
                <view class="quick-time-buttons">
                  <view v-for="option in quickTimeOptions" :key="option.value" 
                        class="quick-time-btn" 
                        @click="selectQuickStartTime(option)">
                    {{ option.label }}
                  </view>
                </view>
              </view>
              <view v-if="errors.startTime" class="error-text">{{ errors.startTime }}</view>
            </view>

            <!-- 课程时长选择 -->
            <view class="form-item">
              <view class="form-label required">课程时长</view>
              
              <!-- 快速选择 -->
              <view class="quick-duration">
                <view class="quick-duration-label">快速选择：</view>
                <view class="duration-chips">
                  <view v-for="duration in quickDurations" :key="duration.value" 
                        class="duration-chip" 
                        :class="{ 'active': selectedDuration === duration.value }"
                        @click="selectQuickDuration(duration)">
                    {{ duration.label }}
                  </view>
                </view>
              </view>

              <!-- 自定义时长输入（只在选择自定义时显示） -->
              <view v-if="selectedDuration === 'custom'" class="custom-duration" style="margin-top: 16rpx;">
                <view class="duration-inputs">
                  <!-- 分钟输入 -->
                  <view class="duration-input-group">
                    <u-input 
                      v-model="form.duration_minutes" 
                      placeholder="分钟" 
                      type="number" 
                      :border="true"
                      style="width: 120rpx;"
                      @input="updateCustomDuration"
                    />
                    <text class="duration-unit">分钟</text>
                  </view>

                  <!-- 小时输入（可选） -->
                  <view class="duration-input-group">
                    <u-checkbox 
                      v-model="showHoursDuration" 
                      @change="toggleHoursDuration"
                      active-color="#0dc160"
                      style="margin-right: 8rpx;"
                    >
                      小时
                    </u-checkbox>
                    <u-input 
                      v-if="showHoursDuration"
                      v-model="form.duration_hours" 
                      placeholder="小时" 
                      type="number" 
                      :border="true"
                      style="width: 120rpx;"
                      @input="updateCustomDuration"
                    />
                    <text v-if="showHoursDuration" class="duration-unit">小时</text>
                  </view>
                </view>
              </view>
              
              <view v-if="errors.duration" class="error-text">{{ errors.duration }}</view>
            </view>
            
            <view class="form-item">
              <view class="form-label required">上课地点</view>
              <view class="form-input-wrapper" @click="chooseMap">
                <view class="form-input" :class="{ 'placeholder': !form.locationName }">
                  {{ form.locationName || '请选择上课地点' }}
                </view>
                <u-icon class="form-arrow" name="map-fill" size="24" color="#0dc160"></u-icon>
              </view>
              <view v-if="errors.locationName" class="error-text">{{ errors.locationName }}</view>
            </view>
          </view>
        </view>

        <!-- 第二步：班级信息 -->
        <view v-if="currentStep === 1" class="step-container">
          <view class="step-header">
            <view class="step-icon">📚</view>
            <view class="step-title-main">班级类型设置</view>
            <view class="step-description">选择适合的班级类型，不同类型有不同的特点和优势</view>
          </view>

          <!-- 班级类型选择 -->
          <view class="form-item">
            <view class="form-label required">班级类型</view>
            <view class="class-type-selector">
              <view 
                v-for="item in classList" 
                :key="item.value" 
                class="class-type-item"
                :class="{ 'class-type-active': form.classType === item.value }"
                @click="selectClassType(item)"
              >
                <view class="radio-circle">
                  <view class="radio-inner" v-if="form.classType === item.value"></view>
                </view>
                <view class="class-type-content">
                  <view class="class-type-name">{{ item.label }}</view>
                  <view class="class-type-subtitle">
                    <text v-if="item.value === '3'">按周期付费 • 可退课退班</text>
                    <text v-if="item.value === '4'">一次性付费 • 课程顺延</text>
                  </view>
                </view>
              </view>
            </view>
            <view v-if="errors.classType" class="error-text">{{ errors.classType }}</view>
          </view>

          <!-- 班级类型说明 -->
          <view class="class-type-description">
            <view v-if="form.classType === '3'" class="type-desc">
              <view class="desc-title">📅 周期班详细说明</view>
              <view class="desc-content">
                <view class="desc-section">
                  <view class="desc-section-title">💰 付费模式</view>
                  <text>• 按周期进行付费，每个周期独立结算</text>
                  <text>• 支持开通免密代扣功能，自动续费</text>
                  <text>• 可随时关闭自动续费功能</text>
                </view>
                <view class="desc-section">
                  <view class="desc-section-title">📚 上课方式</view>
                  <text>• 固定时间上课，培养良好学习习惯</text>
                  <text>• 适合长期系统性学习计划</text>
                  <text>• 需要设置上课星期和总周期数</text>
                </view>
                <view class="desc-section">
                  <view class="desc-section-title">🔄 退课政策</view>
                  <text>• 可提前手动退课和退班</text>
                  <text>• 退款剩余未上课程的金额</text>
                  <text>• 已错过的课程不会顺延，也不退款</text>
                </view>
              </view>
            </view>
            <view v-if="form.classType === '4'" class="type-desc">
              <view class="desc-title">🎯 定制班详细说明</view>
              <view class="desc-content">
                <view class="desc-section">
                  <view class="desc-section-title">💰 付费模式</view>
                  <text>• 一次性付清全部课程费用</text>
                  <text>• 不支持分期付款或代扣功能</text>
                  <text>• 付费后不允许退款</text>
                </view>
                <view class="desc-section">
                  <view class="desc-section-title">📚 上课方式</view>
                  <text>• 灵活安排上课时间</text>
                  <text>• 个性化定制教学内容</text>
                  <text>• 适合有特殊需求的学员</text>
                </view>
                <view class="desc-section">
                  <view class="desc-section-title">🔄 课程政策</view>
                  <text>• 没有上的课程可以自动顺延</text>
                  <text>• 不支持退课退班退款</text>
                  <text>• 课程有效期内可灵活安排</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 周期班特殊设置 -->
          <template v-if="form.classType == 3 || form.classType == 4">
            <view class="form-item">
              <view class="form-label required">上课星期</view>
              <view class="form-label-desc">请选择每周的上课时间</view>
              
              <!-- 优化的星期选择器 - 兼容移动端 -->
              <view class="weekdays-selector">
                <view 
                  v-for="(day, index) in weekList" 
                  :key="index" 
                  class="weekday-option"
                  :class="{ 'weekday-selected': selectedWeekdays[index] }"
                  @click="toggleWeekday(index)"
                >
                  <view class="weekday-circle">
                    <view class="weekday-check" v-if="selectedWeekdays[index]">✓</view>
                  </view>
                  <view class="weekday-text">{{ day.text }}</view>
                </view>
              </view>
              
              <!-- 选择结果显示 -->
              <view v-if="form.weekDayName" class="selected-weekdays">
                <text class="selected-label">已选择：</text>
                <text class="selected-value">{{ form.weekDayName }}</text>
              </view>
              
              <view v-if="errors.weekdays" class="error-text">{{ errors.weekdays }}</view>
            </view>
            
            <view class="form-item">
              <view class="form-label required">总周期数</view>
              <view class="form-input-wrapper">
                <u-input 
                  v-model="form.totalCycles" 
                  placeholder="请输入总周期数（如：8表示8周）" 
                  type="number" 
                  :border="false"
                  class="form-input-field"
                />
              </view>
              <view v-if="errors.totalCycles" class="error-text">{{ errors.totalCycles }}</view>
            </view>
          </template>
        </view>

        <!-- 第三步：成班设置 -->
        <view v-if="currentStep === 2" class="step-container">
          <view class="step-header">
            <view class="step-icon">⏰</view>
            <view class="step-title-main">成班时间与人数</view>
            <view class="step-description">设置成班截止时间和人数要求，合理的设置有助于提高成班成功率</view>
          </view>

          <!-- 优化的成班时间设置 -->
          <view class="setting-group">
            <view class="setting-title">
              <view class="title-icon">👥</view>
              <text>普通班设置</text>
            </view>
            <view class="setting-row">
              <view class="setting-label">成班截止时间</view>
              <view class="form-label-desc">设置上课前多长时间停止报名</view>
              
              <!-- 快速选择 -->
              <view class="deadline-quick-select">
                <view class="deadline-chips">
                  <view v-for="time in quickDeadlineTimes" :key="time.value" 
                        class="deadline-chip" 
                        :class="{ 'active': selectedNormalDeadline === time.value }"
                        @click="selectQuickDeadline('normal', time)">
                    {{ time.label }}
                  </view>
                </view>
              </view>

              <!-- 自定义截止时间输入（只在选择自定义时显示） -->
              <view v-if="selectedNormalDeadline === 'custom'" class="custom-deadline" style="margin-top: 16rpx;">
                <view class="deadline-inputs">
                  <!-- 小时输入 -->
                  <view class="deadline-input-group">
                    <u-input 
                      v-model="form.before_class_hours" 
                      placeholder="小时" 
                      type="number" 
                      :border="true"
                      style="width: 120rpx;"
                      @input="updateNormalDeadline"
                    />
                    <text class="deadline-unit">小时</text>
                  </view>

                  <!-- 天数输入（可选） -->
                  <view class="deadline-input-group">
                    <u-checkbox 
                      v-model="showNormalDays" 
                      @change="toggleNormalDays"
                      active-color="#0dc160"
                      style="margin-right: 8rpx;"
                    >
                      天数
                    </u-checkbox>
                    <u-input 
                      v-if="showNormalDays"
                      v-model="form.before_class_days" 
                      placeholder="天数" 
                      type="number" 
                      :border="true"
                      style="width: 120rpx;"
                      @input="updateNormalDeadline"
                    />
                    <text v-if="showNormalDays" class="deadline-unit">天</text>
                  </view>
                </view>
                
                <!-- 显示总计时间 -->
                <view v-if="normalDeadlineDisplay" class="deadline-display">
                  <text class="deadline-display-label">截止时间：</text>
                  <text class="deadline-display-value">上课前{{ normalDeadlineDisplay }}</text>
                </view>
              </view>
            </view>
            
            <view class="setting-row">
              <view class="setting-label">人数范围</view>
              <view class="number-range">
                <u-input v-model="form.minParticipants" placeholder="最少" type="number" :border="true" />
                <text class="range-separator">-</text>
                <u-input v-model="form.maxParticipants" placeholder="最多" type="number" :border="true" />
                <text class="unit">人</text>
              </view>
            </view>
          </view>

          <view class="setting-group">
            <view class="setting-title">
              <view class="title-icon">💎</view>
              <text>精品班设置</text>
            </view>
            <view class="setting-row">
              <view class="setting-label">成班截止时间</view>
              <view class="form-label-desc">精品班截止时间应早于普通班</view>
              
              <!-- 快速选择 -->
              <view class="deadline-quick-select">
                <view class="deadline-chips">
                  <view v-for="time in quickDeadlineTimesVip" :key="time.value" 
                        class="deadline-chip" 
                        :class="{ 'active': selectedVipDeadline === time.value }"
                        @click="selectQuickDeadline('vip', time)">
                    {{ time.label }}
                  </view>
                </view>
              </view>

              <!-- 自定义截止时间输入（只在选择自定义时显示） -->
              <view v-if="selectedVipDeadline === 'custom'" class="custom-deadline" style="margin-top: 16rpx;">
                <view class="deadline-inputs">
                  <!-- 小时输入 -->
                  <view class="deadline-input-group">
                    <u-input 
                      v-model="form.boutique_before_class_hours" 
                      placeholder="小时" 
                      type="number" 
                      :border="true"
                      style="width: 120rpx;"
                      @input="updateVipDeadline"
                    />
                    <text class="deadline-unit">小时</text>
                  </view>

                  <!-- 天数输入（可选） -->
                  <view class="deadline-input-group">
                    <u-checkbox 
                      v-model="showVipDays" 
                      @change="toggleVipDays"
                      active-color="#0dc160"
                      style="margin-right: 8rpx;"
                    >
                      天数
                    </u-checkbox>
                    <u-input 
                      v-if="showVipDays"
                      v-model="form.boutique_before_class_days" 
                      placeholder="天数" 
                      type="number" 
                      :border="true"
                      style="width: 120rpx;"
                      @input="updateVipDeadline"
                    />
                    <text v-if="showVipDays" class="deadline-unit">天</text>
                  </view>
                </view>
                
                <!-- 显示总计时间 -->
                <view v-if="vipDeadlineDisplay" class="deadline-display">
                  <text class="deadline-display-label">截止时间：</text>
                  <text class="deadline-display-value">上课前{{ vipDeadlineDisplay }}</text>
                </view>
              </view>
            </view>
            
            <view class="setting-row">
              <view class="setting-label">最低人数</view>
              <view class="number-input">
                <u-input v-model="form.boutiqueMinUsers" placeholder="最少人数" type="number" :border="true" />
                <text class="unit">人</text>
              </view>
            </view>
          </view>

          <!-- 智能提示 -->
          <view class="smart-tips">
            <view class="tip-item">
              <view class="tip-icon">💡</view>
              <view class="tip-text">建议精品班截止时间比普通班提前1-2小时，确保有足够时间进行转换</view>
            </view>
          </view>
        </view>

        <!-- 第四步：高级设置（可选） -->
        <view v-if="currentStep === 3" class="step-container">
          <view class="step-header">
            <view class="step-icon">⚙️</view>
            <view class="step-title-main">高级设置</view>
            <view class="step-description">可选的高级功能设置，帮助提升课程吸引力</view>
          </view>

          <view class="advanced-setting">
            <view class="setting-item">
              <view class="setting-info">
                <view class="setting-label">启用新人价</view>
                <view class="setting-desc">新用户首次报名可享受优惠价格</view>
              </view>
              <u-switch v-model="form.newPriceEnabled" active-color="#0dc160"></u-switch>
            </view>
          </view>
          
          <view class="completion-tips">
            <view class="completion-icon">🎉</view>
            <view class="completion-text">
              <view class="completion-title">即将完成设置</view>
              <view class="completion-desc">点击"创建拼班"即可发布您的课程</view>
            </view>
          </view>
        </view>

      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="action-buttons">
      <view v-if="currentStep > 0" class="btn btn-secondary" @click="prevStep">上一步</view>
      <view v-if="currentStep < steps.length - 1" class="btn btn-primary" @click="nextStep">下一步</view>
      <view v-if="currentStep === steps.length - 1" class="btn btn-primary" @click="submitGroupClass">创建拼班</view>
    </view>

    <!-- 其他弹窗组件 -->
    <u-picker 
      mode="time" 
      v-model="showCalendar" 
      @confirm="calendarConfirm" 
      :params="timeParams"
      :default-time="form.startTime"
    ></u-picker>
    
    <u-select v-model="showCategorySelect" :list="courseCategories" @confirm="selectCategoryConfirm" mode="single-column"></u-select>
    <u-select v-model="showCourseSelect" :list="courseList" @confirm="selectCourseConfirm" mode="single-column"></u-select>
    
    <u-popup mode="top" width="100%" height="100%" v-model="showMap" @open="openMap">
      <map-selector ref="mapSelector" @select="handlerSelectMap" @cancel="showMap = false" />
    </u-popup>

    <!-- 成功弹窗 -->
    <u-popup v-model="showSuccessPopup" mode="center" width="80%" :maskCloseAble="false">
      <view class="success-popup">
        <view class="success-icon">
          <u-icon name="checkmark-circle" color="#0dc160" size="64"></u-icon>
        </view>
        <view class="success-title">创建成功</view>
        <view class="success-desc">您已成功发起拼班，请选择下一步操作</view>
        <view class="success-actions">
          <view class="success-btn primary" @click="goToInviteTeacher">去邀请陪伴师</view>
          <view class="success-btn default" @click="goToHomePage">进入主页</view>
          <view class="success-btn link" @click="continueCreateClass">继续发起拼班</view>
        </view>
      </view>
    </u-popup>
  </view>
</template> 